{% extends 'table/page_with_secondary_tabs.twig' %}

{% block content %}
  <div class="container">
    <form method="post" action="{{ url('/table/relation') }}">
      {{ get_hidden_inputs(db, table) }}
      {# InnoDB #}
      {% if is_foreign_key_supported %}
        <div class="card mb-3">
          <div class="card-header">{{ t('Foreign key constraints') }}</div>
          <div class="card-body">
          <div class="table-responsive-md jsresponsive">
            <table class="relationalTable table table-striped w-auto">
              <thead>
                <tr>
                  <th>{{ t('Actions') }}</th>
                  <th>{{ t('Constraint properties') }}</th>
                  {% if tbl_storage_engine|upper == 'INNODB' %}
                    <th>
                      {{ t('Column') }}
                      {{ show_hint(t('Creating a foreign key over a non-indexed column would automatically create an index on it. Alternatively, you can define an index below, before creating the foreign key.')) }}
                    </th>
                  {% else %}
                    <th>
                      {{ t('Column') }}
                      {{ show_hint(t('Only columns with index will be displayed. You can define an index below.')) }}
                    </th>
                  {% endif %}
                  <th colspan="3">
                    {{ t('Foreign key constraint') }}
                    ({{ tbl_storage_engine }})
                  </th>
                </tr>
                <tr>
                  <th></th>
                  <th></th>
                  <th></th>
                  <th>{{ t('Database') }}</th>
                  <th>{{ t('Table') }}</th>
                  <th>{{ t('Column') }}</th>
                </tr>
              </thead>
              {{ foreign_key_row|raw }}
              <tr>
                <th colspan="6">
                  <a class="clearfloat add_foreign_key" href="">
                    {{ t('+ Add constraint') }}
                  </a>
                </th>
              </tr>
            </table>
          </div>
          </div>
        </div>
      {% endif %}

      {% if relation_parameters.relationFeature is not null %}
        {% if default_sliders_state != 'disabled' and is_foreign_key_supported %}
          <div class="mb-3">
            <button class="btn btn-sm btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#internalRelationships" aria-expanded="{{ default_sliders_state == 'open' ? 'true' : 'false' }}" aria-controls="internalRelationships">
              {{ t('Internal relationships') }}
            </button>
          </div>
          <div class="collapse mb-3{{ default_sliders_state == 'open' ? ' show' }}" id="internalRelationships">
        {% endif %}

        <div class="card">
          <div class="card-header">
            {{ t('Internal relationships') }}
            {{ show_docu('config', 'cfg_Servers_relation') }}
          </div>
          <div class="card-body">
          <table class="relationalTable table table-striped table-hover table-sm w-auto">
            <thead>
              <tr>
                <th>{{ t('Column') }}</th>
                <th>
                  {{ t('Internal relation') }}
                  {% if is_foreign_key_supported %}
                    {{ show_hint(t('An internal relation is not necessary when a corresponding FOREIGN KEY relation exists.')) }}
                  {% endif %}
                </th>
              </tr>
            </thead>
            <tbody>
              {% for column in internal_relation_columns %}
                <tr>
                  <td class="align-middle">
                    <strong>{{ column.field }}</strong>
                    <input type="hidden" name="fields_name[{{ column.field_hash }}]" value="{{ column.field }}">
                  </td>

                  <td>
                    {% include 'table/relation/relational_dropdown.twig' with {
                      'name': 'destination_db[' ~ column.field_hash ~ ']',
                      'title': t('Database'),
                      'values': databases,
                      'foreign': column.foreign_db
                    } only %}

                    {% include 'table/relation/relational_dropdown.twig' with {
                      'name': 'destination_table[' ~ column.field_hash ~ ']',
                      'title': t('Table'),
                      'values': column.tables,
                      'foreign': column.foreign_table
                    } only %}

                    {% include 'table/relation/relational_dropdown.twig' with {
                      'name': 'destination_column[' ~ column.field_hash ~ ']',
                      'title': t('Column'),
                      'values': column.unique_columns,
                      'foreign': column.foreign_column
                    } only %}
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
          </div>
        </div>
        {% if default_sliders_state != 'disabled' and is_foreign_key_supported %}
          </div>
        {% endif %}
      {% endif %}

      {% if relation_parameters.displayFeature is not null %}
        <div class="mb-3">
          <label class="form-label" for="displayFieldSelect">{{ t('Choose column to display:') }}</label>
          <select class="form-select" name="display_field" id="displayFieldSelect">
            <option value="">---</option>
            {% for column in internal_relation_columns %}
              <option value="{{ column.field }}"{{ display_field is defined and column.field == display_field ? ' selected' }}>
                {{ column.field }}
              </option>
            {% endfor %}
          </select>
        </div>
      {% endif %}

      <div>
        <input class="btn btn-secondary preview_sql" type="button" value="{{ t('Preview SQL') }}">
        <input class="btn btn-primary" type="submit" value="{{ t('Save') }}">
      </div>
    </form>

    <div class="modal fade" id="previewSqlModal" tabindex="-1" aria-labelledby="previewSqlModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="previewSqlModalLabel">{{ t('Loading') }}</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ t('Close') }}"></button>
          </div>
          <div class="modal-body">
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" id="previewSQLCloseButton" data-bs-dismiss="modal">{{ t('Close') }}</button>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}
